<template>
    <div class="strip-container">
        <h1 class="title slide-bar">I'm alphardex.</h1>
    </div>
</template>

<style lang="scss" scoped>
    .strip-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        height: 120px;
        $ease-in-duration: 1s;
        $ease-out-delay: $ease-in-duration;
        $ease-in-direction: cubic-bezier(0.95, 0, 0.8, 0);

        .slide-bar {
            position: relative;
            animation: text-white 1.8s 1.4s infinite;
            color:transparent;
            padding: 0 15px;

            &::before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                width: 100%;
                height: 100%;
                background: #456fff;
                transform: scaleX(0);
                transform-origin: left;
                animation: slide-trip 2s cubic-bezier(0.75, 0, 0, 1) infinite;
            }
        }

        @keyframes text-white {
            to {
                color: red;
            }
        }

        @keyframes slide-trip {
            50% {
                transform: scaleX(1);
                transform-origin: left;
            }

            50.1% {
                transform-origin: right;
            }

            100% {
                transform: scaleX(0);
                transform-origin: right;
            }

        }
    }
</style>
